The U.S. Department of Education (DOE) website is being redesigned to improve educational access and excellence, creating a more user-friendly and accessible platform. Focused on better serving primary users—students, parents, educators, policymakers, and community members—this UX/UI bootcamp project provides clear, essential information on student loans, grants, and educational resources.
The website promotes student achievement and global competitiveness through educational excellence
and
equal access. However, other sites fail to make crucial loan and grant information easily
accessible,
driving users away.
How can the Department of Education website be developed to increase user success based on page
traffic
and link clicks?
Enhancing the Department of Education website's user experience for parents of high school seniors can streamline student loan and grant research, improve accessibility, and increase user success through better page traffic and link clicks.
Parents of Seniors Students.
They need Support with college financial planning, like loans and grants, to ensure family stability, along with tools to stay engaged in their children’s education and manage work-life balance.
How might we redesign the U.S. Department of Education website to create a more user-friendly, accessible platform for parents, students, and educators, ensuring easy access to critical information on student loans, grants, and educational resources? Our goal is to improve navigation, enhance information accessibility, and increase engagement through a design that fosters educational success and supports users in making informed decisions.
To gain insights from real users on the usability and clarity of the U.S. Department of Education website. We aim to understand their challenges, preferences, and needs when accessing information on financial aid, grants, and educational resources.
Navigation
Content Organization:
Language and Accessibility:
Objective
Key Tasks
Key Takeaway
Users find it hard to navigate the U.S. Department of Education website due to confusing sections, too much text, and unclear links. Simplifying the navigation, adding clearer visuals, and making language settings easier to find can help users quickly access important information about grants and loans.
Navigation
Hard-to-find language settings, broken links, unclear paths, and overwhelming buttons/categories.
Content and Information Clarity
Confusing sections (e.g., “Grants” vs. “Student Loans”), inconsistent terms, dense text, poorly placed guidance.
Information Overload
Heavy text, difficulty selecting correct links.
Visual Design
Distracting colors, lack of engaging icons/carousels.
External Links and Terminology
Confusing redirects, unfamiliar terms (e.g., FSA ID), translation challenges.
In the previous step, we conducted usability testing to understand how real users navigate the U.S. Department of Education website, focusing on challenges they face in finding financial aid information. From these tests, we observed common pain points like confusing navigation, overwhelming text, and unclear grant vs. loan distinctions. Creating Maria’s persona consolidates these findings, representing a primary user type—a parent managing their child’s education finances.
Maria Gomez, a 46-year-old office manager, seeks student loans and grants for her child's college expenses. She's tech-savvy and involved in her child's education but worries about the financial impact of debt and is unsure where to start with grants.
Maria’s challenges with managing college expenses and navigating financial options highlight the
need
for clear, simplified information on grants and loans. This insight informed our website redesign
by
focusing on:
Our competitor analysis by Patrick (team memeber) shows competitors use dynamic visuals but suffer from clutter or dullness. The redesign will focus on clear navigation, balanced visuals, and engaging aesthetics for a clean, user-friendly homepage.
The U.S. Department of Education website faces key usability and accessibility issues, including inconsistent navigation, excessive links, lack of error recovery in the search bar, missing alt text for images, poor color contrast, and inadequate accessibility features like WAI-ARIA attributes. Addressing these challenges with clearer navigation, simplified content, and accessibility improvements will enhance user experience and inclusivity.
The "Student Loans, Forgiveness" section struggles with jargon, inconsistent link styling, scattered information, and missing definitions. Accessibility issues include lack of alternative text, poor contrast, and insufficient ARIA attributes. Centralizing information and improving design and accessibility will greatly enhance usability.
The "Grants" section of the U.S. Department of Education website highlights several usability and
accessibility issues. Usability concerns include jargon-heavy language, inconsistent link styling,
a missing email icon, and uneven spacing in bullet points.
Accessibility gaps involve
missing
alternative text for buttons, insufficient guidance for external links, and the need for larger
buttons to support users with mobility impairments. Addressing these problems with clearer
language, consistent design, and accessibility improvements will significantly enhance the user
experience.
This wireflow shows the user path through the U.S. Department of Education website, focusing on accessing student loans and grant applications. Key observations from our UX/UI research include:
We conducted usability testing to uncover navigation issues and confusing instructions in the grant application process. These insights helped us improve the website’s clarity, accessibility, and user experience.
Testing revealed confusing navigation, dense content, and visual distractions. Users struggled with broken links, unclear sections, and overwhelming text. These findings guided us to simplify navigation, reduce text, and improve visuals for a smoother user experience.
Card Sorting
After synthesizing the initial usability data, we moved into the ideation phase to brainstorm design solutions within the project scope. This process allowed us to develop a clear and user-friendly structure for the website, ensuring users can easily find and understand information.
1. Create Cards & Shuffle:
2. Group & Label:
Participants grouped related cards and labeled categories. For example:
3. Structure:
Groups were organized into a clear hierarchical structure:
Site Map
This sitemap shows the restructured navigation for the U.S. Department of Education website. Key
sections are clearly organized to improve user experience.
This structure simplifies navigation
by grouping related content, making it easier for users to find loans, grants, and resources. The clear
organization supports an intuitive experience, reduces confusion, and helps users access key
information quickly.
Wireframes
As a team, we worked together to create the initial wireframes and designed simple interactions to quickly test usability.
Feedback
During this process, we noticed several important areas for improvement:
The navigation wasn’t visually noticeable enough, so users might overlook it.
The hero banner on the homepage felt plain and lacked interactive elements to engage users or encourage actions.
The press release area needed clearer separation from other sections to avoid users accidentally clicking on it.
The clickable areas in the Secretary of Education introduction weren’t clearly marked, which made it hard for users to know they were interactive.
The buttons on this page were too large, taking up unnecessary space and making the design feel unbalanced.
High-fidelity prototype
In the iteration phase of the DOE project, our team refined the designs based on feedback from the initial
design phase and usability testing. We improved wireframes, streamlined navigation, and enhanced the
interface to better meet the needs of students and educators.
This iterative process allowed us to
optimize
visual design and interactivity, delivering a more accessible and user-friendly experience.
Key
updates included:
Mobile device design
These mobile wireframes are adapted from the desktop design, ensuring a seamless transition to smaller screens. Starting with desktop allows for establishing a clear information architecture and visual style, which are then streamlined for mobile. This approach ensures feature completeness, consistent branding, and an efficient, user-centered experience on all devices.
UI Style Guide
This UI Style Guide serves as a comprehensive reference for maintaining visual and functional consistency across the EDU project. It includes guidelines for typography, color schemes, iconography, and spacing to ensure an intuitive and accessible user interface. By adhering to these standards, we aim to create a cohesive design system that enhances usability and aligns with the project's educational goals.
